<template>
  <div class="xy-container">{{ xy }}</div>
</template>

<script>
export default {
  props: ["map"],

  data() {
    return {
      xy: "经度: 118.08, 纬度: 24.48",
    };
  },

  methods: {
    getXY(map) {
      map.on("pointermove", (e) => {
        let xy = e.coordinate;
        this.xy = `经度: ${xy[0].toFixed(2)}, 纬度: ${xy[1].toFixed(2)}`;
      });
    },
  },

  watch: {
    map() {
      this.getXY(this.map);
    },
  },
};
</script>

<style scoped>
.xy-container {
  background-color: #fff;
  padding: 5px;
  opacity: 0.8;
  font-size: 12px;
}
</style>